<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Demo Page for jQuery UI selectmenu</title>
	<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" type="text/css" />
	<link rel="stylesheet" href="../css/ui.selectmenu.css" type="text/css"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

	<script type="text/javascript" src="../js/ui.selectmenu.js"></script>
	<style type="text/css">
		/*demo styles*/
		body {font-size: 62.5%; font-family:"Verdana",sans-serif; margin: 70px 10px;}
		fieldset { border:0;  margin-bottom: 40px;}	
		label,select,.ui-select-menu { float: left; margin-right: 10px; }
		select { width: 200px; }
		
		/*select with custom icons*/
		body a.customicons { height: 2.8em;}
		body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
		body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
		body .video .ui-selectmenu-item-icon { background: url(sample_icons/24-video-square.png) 0 0 no-repeat; }
		body .podcast .ui-selectmenu-item-icon { background: url(sample_icons/24-podcast-square.png) 0 0 no-repeat; }
		body .rss .ui-selectmenu-item-icon { background: url(sample_icons/24-rss-square.png) 0 0 no-repeat; }
		
		
	</style>
	<script type="text/javascript">
	
	
		$(function(){
			
			$('select#speedA').selectmenu();
			
			$('select#speedAa').selectmenu({maxHeight: 150});
			
			$('select#speedB').selectmenu({
				width: 300,
				format: addressFormatting
			});
			
			$('select#speedC').selectmenu({style:'dropdown'});
			
			$('select#speedD').selectmenu({
				style:'dropdown', 
				menuWidth: 400,
				format: addressFormatting
			});
			
			$('select#files, select#filesC').selectmenu({
				icons: [
					{find: '.script', icon: 'ui-icon-script'},
					{find: '.image', icon: 'ui-icon-image'}
				]
			});
			
			$('select#filesB').selectmenu({
				icons: [
					{find: '.video'},
					{find: '.podcast'},
					{find: '.rss'}
				]
			});
			
			
		});
		
		
		//a custom format option callback
		var addressFormatting = function(text){
			var newText = text;
			//array of find replaces
			var findreps = [
				{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
				{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
				{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
			];
			
			for(var i in findreps){
				newText = newText.replace(findreps[i].find, findreps[i].rep);
			}
			return newText;
		}
		
		

			
		
		
	</script>
	<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
<script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script>
</head>
<body>
	<form action="#">
		
		<h2>"dropdown" Style</h2>
		<fieldset>
			<label for="speedC">Select a Speed:</label>
			<select name="speedC" id="speedC">
				<option value="Slower" class="whoo">Slower</option>

				<option value="Slow">Slow</option>
				<option value="Medium" selected="selected">Medium</option>
				<option value="Fast">Fast</option>
				<option value="Faster">Faster</option>
			</select>
		</fieldset>

	</form>
</body>
</html>
